<template>
	<view class="content">
		<!-- #ifdef H5 || APP-PLUS -->
		<view class="message-title">
			<commonTitle title="手机号注册"></commonTitle>
		</view>
		<!-- #endif -->
		<view class="list-scroll-content">
			<view class="input-box">
				<input class="input-text" type="number" placeholder="输入手机号" v-model="phone"/>
			</view>
			<view class="input-box">
				<input class="input-text" type="password" placeholder="输入6-16位密码，限字母及数字" v-model="pwd1"/>
			</view>
			<view class="input-box">
				<input class="input-text" type="password" placeholder="确认密码" v-model="pwd2"/>
			</view>
			<view class="input-box vcode">
				<input class="input-text" type="number" placeholder="请输入验证码" v-model="vcode"/>
				<text class="send-code" @tap="getCode">{{vtext}}</text>
			</view>
			<view class="input-box">
				<input class="input-text" type="number" placeholder="输入邀请人ID(选填)" v-model="extensionUserId"/>
			</view>
			<view class="register-box">
				<image @tap="register"
				:src=" submit ? '../../static/common/register-2.png' :'../../static/common/register-1.png'" class="register-submit"></image>
			</view>
			
			
			
			
		</view>
		
	</view>
</template>

<script>
	import commonTitle from'../../components/titile/title.vue'
	export default{
		components:{
			commonTitle
		},
		data () {
			return {
				apptoken:"",
				phone:"",
				pwd1:"",
				pwd2:"",
				vcode:"",
				vtext:"获取验证码",
				submit:false,
				extensionUserId:""
			}
		},
		watch:{
			vtext(newName, oldName) {
				 this.submit = true;
			}
		},
		onLoad() {
			this.apptoken = uni.getStorageSync("apptoken");
		},
		methods: {
			getCode(){
				if(this.vtext !== '获取验证码'){
					return;
				}
				this.yanzheng();
				const _this = this;
				uni.request({
					url:this.$API.URL + this.$API.phoneGetvalidatecode,
					data:{phone:this.phone},
					success(res) {
						console.log(res)
						if(res.data.success){
							_this.$CommonJS.showToast("验证码已发送");
							_this.getTime();
						}
					}
				})
			},
			getTime(){
				const _this = this;
				const num = 60;
			  var timer =	 setInterval(function(){
					if(num <= 0){
						clearInterval(timer);
						_this.vtext = "获取验证码";
						return;
					}
					
					_this.vtext = '重新发送' + num + 's';
					num --;
				},1000)
			},
			register(){
				this.yanzheng();
				if(!this.vcode){
					this.$CommonJS.showToast("请输入验证码");
					return;
				}
				
			},
			yanzheng(){
				if(!this.phone){
					this.$CommonJS.showToast("请输入手机号");
					return;
				}
				if(!(/^1[3456789]\d{9}$/.test(this.phone))){ 
					this.$CommonJS.showToast("手机号码有误，请重填");
					return; 
				} 
				if(!this.pwd1){
					this.$CommonJS.showToast("请设置密码");
					return;
				}
				if(this.pwd1.toString().length<6){
					this.$CommonJS.showToast("请设置长度大于6位的密码");
					return;
				}
				if(!this.pwd2){
					this.$CommonJS.showToast("请输入确认密码");
					return;
				}
				if(this.pwd1 !== this.pwd2){
					this.$CommonJS.showToast("两次密码输入不一致");
					return;
				}
			}
		}
		
	}
</script>

<style>
	@import url("register.css");
</style>
